<template>
  <div class="feedbackPage pd-20">
    <el-input v-model="nickName"
              @keyup.enter.native="searchFeedbackMethod"
              placeholder="请输入反馈人名称搜索"
              clearable
              @clear="searchFeedbackMethod"
              class="w-200" />
    <el-button type="primary"
               @click="searchFeedbackMethod">查 询</el-button>
    <el-table ref="multipleTable"
              :data="feedbackList"
              style="width: 100%"
              border
              class="mt-20">
      <el-table-column type="index"
                       align="center"
                       label="序号"
                       width="50">
      </el-table-column>
      <el-table-column prop="nickName"
                       label="反馈人"
                       min-width="50"
                       :formatter="nickNameFormatter">
      </el-table-column>
      <el-table-column prop="userType"
                       label="终端"
                       min-width="50"
                       :formatter="userTypeFormatter">
      </el-table-column>
      <el-table-column prop="type"
                       label="反馈类型"
                       min-width="50"
                       :formatter="typeFormatter">
      </el-table-column>
      <el-table-column prop="title"
                       label="标题"
                       min-width="150">
      </el-table-column>
      <el-table-column prop="content"
                       label="反馈内容"
                       min-width="150">
      </el-table-column>
      <el-table-column label="反馈图片"
                       min-width="100">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px"
                    :src="scope.row.imagesUrls[0]"
                    :preview-src-list="scope.row.imagesUrls">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="status"
                       label="状态"
                       width="100"
                       :formatter="statusFormatter">
      </el-table-column>
      <el-table-column prop="createTime"
                       label="提交日期"
                       width="150"
                       :formatter="dateFormatter">
      </el-table-column>
      <el-table-column width="180"
                       align="center"
                       label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 0"
                     size="mini"
                     type="primary"
                     @click="handlePass(scope.$index, scope.row)">通 过</el-button>
          <el-button v-if="scope.row.status === 0"
                     size="mini"
                     type="danger"
                     @click="handleDismissed(scope.$index, scope.row)">驳 回</el-button>
          <span v-else>- -</span>
        </template>
      </el-table-column>
      <infinite-loading slot="append"
                        @infinite="handleFeedbackMethod"
                        :identifier="infiniteId"
                        force-use-infinite-wrapper=".el-table__body-wrapper">
      </infinite-loading>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "feedbackPage",
    data () {
      return {
        feedbackList: [],
        nickName: '',
        pageSize: 20,
        pageIndex: 0,
        infiniteId: 0,
        state: ''
      }
    },
    methods: {
      nickNameFormatter (row) {
        if (row.userDto) {
          return row.userDto.nickName
        } else {
          return row.doctorDto.nickName
        }
      },
      userTypeFormatter (row) {
        let userTypeList = ["用户端", "医生端"];
        return userTypeList[row.userType]
      },
      typeFormatter (row) {
        switch (row.type) {
          case 1:
            return "产品使用";
            break
          case 2:
            return "软件错误";
            break
        }
      },
      statusFormatter (row) {
        let statusList = ["已提交,待审核", "审核中", "已接受,待解决", "已解决", "已发布", "已驳回"];
        return statusList[row.status];
      },
      dateFormatter (row) {
        return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm')
      },
      handleFeedbackMethod ($state) {
        this.state = $state;
        let param = {
          nickName: this.nickName,
          pageSize: this.pageSize,
          pageIndex: this.pageIndex
        };
        this.post(this.api.feedbackPage.url, param).then(res => {
          if (res.data.code === '200') {
            if (res.data.object.length) {
              this.pageIndex += 1;
              this.feedbackList = this.feedbackList.concat(res.data.object);
              $state.loaded();
            } else {
              $state.complete();
            }
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'error'
            })
          }
        });
      },
      searchFeedbackMethod () {
        if (this.nickName === '') {
          this.pageIndex = 0;
          this.feedbackList = [];
          this.infiniteId += 1;
        } else {
          this.pageIndex = 0;
          this.feedbackList = [];
          this.handleFeedbackMethod(this.state)
        }
      },
      handlePass () {
        this.$message.success('待开发!');
      },
      handleDismissed () {
        this.$message.success('待开发!');
      }
    }
  }
</script>

<style scoped>
</style>
